
<template>
  <template v-for="item in menuItem" :key="item.id">
    <el-sub-menu
      v-if="item.children && item.children.length > 0"
      :index="item.id.toString()"
    >
      <template #title>
        <span @click.stop="path(item.menuUrl)">{{ item.label }}</span>
      </template>
      <!-- 递归调用自身处理子菜单 -->
      <RecursiveMenu :menuItem="item.children" />
    </el-sub-menu>
    <el-menu-item v-else :index="item.menuUrl" @click="path(item.menuUrl)">
      {{ item.label }}
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { defineProps, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import RecursiveMenu from "../views/NewView.vue";

// 定义菜单项的类型
interface MenuItem {
  id: number;
  label: string;
  menuUrl: string;
  children?: MenuItem[];
}

const path = async (url: string) => {
  try {
    await router.push(url);
  } catch (error) {
    console.error("路由跳转失败:", error);
  }
};

// 定义组件接收的 props
const props = defineProps<{
  menuItem: MenuItem[];
}>();
</script>